<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="canvas" width="161" height="161" style="image-rendering: pixelated; zoom: 5"></canvas>
    <script>
      const canvasE = document.getElementById('canvas')
      const ctx = canvasE.getContext('2d')

      const chars = '苟利国家生死以，岂因祸福避趋之。'
      let dataStr = ''

      ctx.strokeStyle = 'lime'
      ctx.font = '15px serif'
      for (let i = 0; i < chars.length; i++) {
        const xi = i % 10
        const yi = Math.floor(i / 10)
        ctx.strokeRect(xi * 16 + 0.5, yi * 16 + 0.5, 16, 16)
        ctx.fillText(chars[i], xi * 16 + 1, yi * 16 + 14)

        const { data } = ctx.getImageData(xi * 16 + 0.5, yi * 16 + 0.5, 16, 16)
        const bitmap = new Array(32).fill(0)
        for (let i = 0; i < data.length / 4; i++) {
          if (!data[i * 4 + 1] && data[i * 4 + 3]) bitmap[Math.floor(i / 8)] |= (1 << (7 - i % 8))
        }
        dataStr += bitmap.map(d => '0x' + (d + 0x100).toString(16).substring(1) + ',').join('')
        dataStr += '//' + chars[i] + '\n'
      }

      console.log(dataStr)
    </script>
  </body>
</html>
